import { sickbed_application } from '@/services/familysickbed';
import { RefObject, useState } from 'react';
import { DatePickerRef, Form, Input, Picker, Radio, Space, } from 'antd-mobile'
import './index.less'
import { Button, } from 'antd-mobile';
import { message } from 'antd';
import calculateAge from '@/utils/idcard';
const JianhuHospital = () => {

    // 获取URL参数
    const getUrlParam = (name: string) => {
        const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
        const r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return null;
    };
    const [form] = Form.useForm();

    // 获取医院机构id
    const platform_id: any = getUrlParam('platform_id');
    /** 病床申请*/
    const sickBed = async (value: any) => {
        console.log('value', value);

        let request_body = {
            platform_id: platform_id,
            name: value.name,
            sex: value.sex[0],
            phone: value.phone,
            id_card: value.id_card,
            age: value.age,
            type: value.type[0],
            was_hospitalization: value.was_hospitalization,
            medical_history: value.medical_history
        }
        let res: any = await sickbed_application(request_body)
        // return
        if (res.code == 200) {
            message.success('提交成功');
            setSumbit(false)
        }
    }
    // 性别选项
    const [visible, setVisible] = useState(false);
    const [value, setValue] = useState<any>();
    // 申请人
    const [applicant, setApplicant] = useState(false);
    const [applicantValue, setApplicantValue] = useState<any>();

    // 住院选项
    const [questionValeue, setQuestionVlaue] = useState<number>();
    // 问题选项
    const [sickValue, setSickVlaue] = useState<number>();
    // 提交成功
    const [submit, setSumbit] = useState(true);
    console.log(submit);

    // 住院选项改变时回调
    const onChange = (value: any) => {
        setQuestionVlaue(value);
    };
    // 问题选项改变时回调
    const onChangesick = (value: any) => {
        setSickVlaue(value);
    };
    // 获取身份证信息,修改form表单项
    const onChangeIdCard = (value: any) => {
        form.setFieldsValue({
            age: calculateAge(value)
        })
    }

    return (
        <div className='box'>
            <div className="loginbox">
                <div className="main">
                    <div className='desc'>家庭病床在线申请</div>
                    {
                        platform_id == 10 ? <div className='title'>鉴湖街道社区卫生服务中心</div> : ''
                    }
                    {
                        submit === true ?
                            <Form
                                form={form}
                                onFinish={(value) => sickBed(value)}
                                layout='horizontal'
                                footer={
                                    <Button block type='submit' color='primary' size='large' style={{ marginTop: '100px' }}>
                                        提交
                                    </Button>
                                }
                            >
                                <Form.Item
                                    name='name'
                                    label='姓名'
                                    rules={[
                                        { required: true, message: '姓名不能为空' },
                                        { max: 10, message: '允许输入字符最大数为10', },
                                        { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '不能输入空格' },
                                    ]}
                                >
                                    <Input placeholder='请输入姓名' />
                                </Form.Item>
                                <Form.Item
                                    name='sex'
                                    label='性别'
                                    trigger='onConfirm'
                                    onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                                        // datePickerRef.current?.open()
                                        setVisible(true)
                                    }}
                                    rules={[
                                        { required: true, message: '请选择性别' },
                                    ]}
                                >
                                    <Picker
                                        title={"请选择性别"}
                                        aria-placeholder='请选择性别'
                                        columns={[
                                            [
                                                { label: '男', value: 1 },
                                                { label: '女', value: 2 },
                                            ]
                                        ]}
                                        // 是否显示选择器
                                        visible={visible}
                                        // 确认和取消时都会触发关闭事件
                                        onClose={() => {
                                            setVisible(false)
                                        }}
                                        // 选中项
                                        value={value}
                                        // 确认时触发
                                        onConfirm={setValue}
                                        // 选项改变时触发
                                        onSelect={(value) => {

                                        }}
                                        popupClassName="aaaaa"
                                        forceRender={true}
                                    >
                                        {(items) => {
                                            return (
                                                <>
                                                    {items.every(item => item === null)
                                                        ? <div style={{ color: '#B8B8B8' }}>请选择性别</div>
                                                        : items.map(item => item?.label ?? '请选择性别')}
                                                </>
                                            )
                                        }}
                                    </Picker>
                                </Form.Item>
                                <Form.Item
                                    name="id_card"
                                    label="身份证号"
                                >
                                    <Input placeholder='请输入身份证号' onChange={(e) => onChangeIdCard(e)} />
                                </Form.Item>
                                <Form.Item
                                    name="age"
                                    label="年龄"
                                    rules={[
                                        { required: true, message: '年龄必填' },
                                        { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '不能输入空格' },
                                    ]}
                                >
                                    <Input placeholder='请输入年龄' />
                                </Form.Item>
                                <Form.Item
                                    name="type"
                                    label="申请人"
                                    trigger='onConfirm'
                                    rules={[{ required: true, message: '请选择申请人' }]}
                                    onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                                        // datePickerRef.current?.open()
                                        setApplicant(true)
                                    }}
                                >
                                    <Picker
                                        title={"请选择申请人"}
                                        columns={[
                                            [
                                                { label: '自己', value: 1 },
                                                { label: '家属', value: 2 },
                                            ]
                                        ]}
                                        // 是否显示选择器
                                        visible={applicant}
                                        // 确认和取消时都会触发关闭事件
                                        onClose={() => {
                                            setApplicant(false)
                                        }}
                                        value={applicantValue}
                                        onConfirm={setApplicantValue}
                                        // 选项改变时触发
                                        onSelect={(value) => {
                                            setApplicantValue(value)
                                        }}
                                        forceRender={true}
                                    >
                                        {(items) => {
                                            return (
                                                <>
                                                    {items.every((item) => item === null)
                                                        ? <div style={{ color: '#B8B8B8' }}>请选择申请人</div>
                                                        : items.map(item => item?.label ?? '请选择申请人')}
                                                </>
                                            )
                                        }}
                                    </Picker>
                                </Form.Item>
                                <Form.Item
                                    name="phone"
                                    label="联系电话"
                                    rules={[
                                        { required: true, message: '手机号必填' },
                                        { pattern: /^1\d{10}$/, message: '请输入正确的手机号' },
                                    ]}
                                >
                                    <Input placeholder='请输入联系电话' />
                                </Form.Item>
                                <Form.Item name='was_hospitalization' label='您住过院吗？'
                                    rules={[
                                        { required: true, message: '此问题必填' },
                                    ]}>
                                    <Radio.Group onChange={onChange} value={questionValeue}>
                                        <Space direction='horizontal'>
                                            <Radio value={1}>是</Radio>
                                            <Radio value={0}>否</Radio>
                                        </Space>
                                    </Radio.Group>
                                </Form.Item>
                                {
                                    questionValeue == 1 ?
                                        <Form.Item
                                            name="medical_history"
                                            label="出院时诊断什么疾病？"
                                            layout="vertical"
                                            rules={[
                                                { required: true, message: '请选择' },
                                            ]}
                                        >
                                            <Radio.Group
                                                onChange={onChangesick}
                                                value={sickValue}
                                            >
                                                <Space direction="vertical">
                                                    <Radio value="高血压合并心脑血管疾病">高血压合并心脑血管疾病</Radio>
                                                    <Radio value="糖尿病合并多个并发症">糖尿病合并多个并发症</Radio>
                                                    <Radio value="慢性阻塞性肺疾病">慢性阻塞性肺疾病</Radio>
                                                    <Radio value="各种骨折术后">各种骨折术后</Radio>
                                                    <Radio value="肿瘤放疗、化疗后">肿瘤放疗、化疗后</Radio>
                                                    <Radio value="恶性肿瘤晚期">恶性肿瘤晚期</Radio>
                                                </Space>
                                            </Radio.Group>
                                        </Form.Item> : ''
                                }
                            </Form> :
                            <div className='submit'>
                                <div className='img'><img src='/sumbit.png'></img></div>
                                <div className='typeone'>提交成功！</div>
                                <div className='typetwo'>如果您或者您的家属符合家庭病床建床条件我们会电话尽快联系您的</div>
                            </div>
                    }
                </div>
            </div>
        </div>
    )
}

export default JianhuHospital;